<script setup lang="ts">
import { Order, PageIn } from '$/client'
import { Copilots, OrderIn, Orders, Users } from '$/client-admin'
import { destroyDialog, middlewares, paidDialog } from '$/client-core'
import { IsAdmin } from '$/permissions'
import ComCtl from '@/components/ComCtl.vue'
import OrderForm from '@/components/form-admin/OrderForm.vue'
import NPagination from '@/components/packaging/NPagination.vue'
import RecordInfo from '@/components/RecordInfo.vue'
import { Pen as IPen, Plus as IPlus, TrashCan as ITrashCan } from '@vexip-ui/icons'
import { useRequest } from 'alova/client'
import { Button, Modal, Table, TableColumn } from 'vexip-ui'
import { ref } from 'vue'

const mi = ref(OrderIn.inst())
const mo = ref(Order.inst())
const params = ref(PageIn.inst())
const showCreate = ref(false)
const showUpdate = ref(false)

const {
  loading: refreshing,
  data: page,
  send: refresh
} = useRequest(() => Orders.list(params.value), {
  initialData: []
}).onSuccess(() => {
  showCreate.value = false
  showUpdate.value = false
  mi.value.reset()
  mo.value.reset()
})
const { data: users } = useRequest(Users.tinylist, {
  initialData: []
})
const { data: copilots } = useRequest(Copilots.tinylist, {
  initialData: []
})
const { loading: creating, send: create } = useRequest(() => Orders.create(mi.value), {
  immediate: false
}).onSuccess(refresh)
const { loading: updating, send: update } = useRequest(() => Orders.update(mo.value), {
  immediate: false
}).onSuccess(refresh)
const { loading: paying, send: paid } = useRequest(() => Orders.paid(mo.value.id), {
  immediate: false,
  middleware: middlewares(paidDialog)
}).onSuccess(refresh)
const { loading: destroying, send: destroy } = useRequest(() => Orders.destroy(mo.value.id), {
  immediate: false,
  middleware: middlewares(destroyDialog)
}).onSuccess(refresh)
</script>

<template>
  <ComCtl content-class="flex flex-col gap-4" :loading="[refreshing, destroying, paying]">
    <div class="flex gap-2 overflow-auto">
      <Button type="primary" @click="showCreate = true" :icon="IPlus" />
      <NPagination v-model="params" :total="page.total" @change="refresh" />
    </div>
    <Table :data="page.content">
      <TableColumn id-key="other" type="expand">
        <template #default="{ row }: { row: Order }">
          <RecordInfo :info="row" />
        </template>
      </TableColumn>
      <TableColumn name="操作" id-key="action" :width="90">
        <template #default="{ row }: { row: Order }">
          <Button
            v-if="IsAdmin()"
            size="small"
            type="error"
            @click="
              () => {
                mo = row.clone()
                destroy()
              }
            "
            :icon="ITrashCan"
            text
          />
          <Button
            size="small"
            type="primary"
            @click="
              () => {
                mo = row.clone()
                showUpdate = true
              }
            "
            :disabled="row.payment"
            :icon="IPen"
            text
          />
        </template>
      </TableColumn>
      <TableColumn name="结算状态" id-key="payment">
        <template #default="{ row }: { row: Order }">
          <Button
            size="small"
            :type="row.payment ? 'success' : 'error'"
            @click="
              () => {
                if (row.payment) return
                mo = row.clone()
                paid()
              }
            "
          >
            {{ row.payment ? '已支付' : '未支付' }}
          </Button>
        </template>
      </TableColumn>
      <TableColumn name="客户" id-key="user">
        <template #default="{ row }: { row: Order }">
          {{ users.find((x) => x.id === row.user)?.name }}
        </template>
      </TableColumn>
      <TableColumn name="陪玩" id-key="copilot">
        <template #default="{ row }: { row: Order }">
          {{ copilots.find((x) => x.id === row.copilot)?.name }}
        </template>
      </TableColumn>
      <TableColumn name="订单详情" id-key="description" />
      <TableColumn name="单价" id-key="price" sorter />
      <TableColumn name="时长" id-key="duration" sorter />
      <TableColumn name="总价格" id-key="totalPrice" sorter />
      <TableColumn name="店铺应得" id-key="iPrice" sorter />
      <TableColumn name="陪玩应得" id-key="cPrice" sorter />
      <TableColumn name="总充值" id-key="amountRecord" />
      <TableColumn name="余额" id-key="balanceRecord" />
    </Table>
    <template #modals>
      <Modal title="创建" v-model:active="showCreate">
        <OrderForm v-model="mi" :loading="creating" :submit="create" :copilots="copilots" :users="users" />
      </Modal>
      <Modal title="修改" v-model:active="showUpdate">
        <OrderForm v-model="mo" :loading="updating" :submit="update" :copilots="copilots" :users="users" />
      </Modal>
    </template>
  </ComCtl>
</template>
